import Taro, { Component } from '@tarojs/taro'
import { View , Text , Image , Input} from '@tarojs/components';
import { baseImgSrc } from '../../util/base_url';
import { AtButton , AtInput , AtMessage } from 'taro-ui';
import { setGlobalData , getGlobalData, getRole } from '../../util/globaldata';
import { getUserInfo , sendOrder, wxLogin } from '../../util/api';
import './createdorder.scss';
export default class CreatedOrder extends Component {
    constructor(){
        super(...arguments)
        this.state = {
            startAddress:{
                address:"",
                latitude:"",
                longitude:"",
            },
            endAddress:{
                address:"",
                latitude:"",
                longitude:"",
            },
            start_time:"",
            is_dang:[],
            car_id:"",
            phone:"",
            money:"",
            agreeXieyi:true,
            userRole:1,
        }
    }
    componentWillMount(){
        let {startAddress ,endAddress , start_time , is_dang , car_id  } = getGlobalData('orderInfo');
        this.setState({startAddress , endAddress , start_time , is_dang , car_id , userRole : this.$router.params.role});
        console.log(this.$router.params.role)
        Taro.setNavigationBarTitle({title:this.$router.params.role == 2 ? '我是司机' : '我是车主'})
        getUserInfo().then( res => {
            if(res.code == 0){
                this.setState({
                    phone:res.data.phone,
                    money:res.data.baoxian,
                })
            }
        })
    }
    componentWillUnmount(){
        setGlobalData('orderInfo',{})
    }
    onChangePhone(phone){
        this.setState({phone});
        return phone
    }
    onCarIdChange(e){
        this.setState({car_id:e.detail.value});
        return e.detail.value;
    }
    toBoaze(e){
        e.stopPropagation();
        Taro.navigateTo({
            url:"/pages/loginXieyi/loginXieyi?model=4"
        })
    }
    changeAgree(){
        this.setState({agreeXieyi:!this.state.agreeXieyi})
    }
    //创建订单
    createOrder(){
        let {startAddress ,endAddress , start_time , is_dang , car_id  , agreeXieyi , userRole} = this.state;
        if(!car_id && userRole == 1){
            Taro.atMessage({
                'message':'请输入车牌号',
                type:'error'
            })
            return false;
        }
        if(!agreeXieyi){
            Taro.atMessage({
                'message':'请阅读并同意《保险声明》',
                type:'error'
            })
            return false
        }
        //档位获取
        is_dang = is_dang.length == 2 ? 2 : is_dang[0].value; 
        sendOrder({
            lat:startAddress.latitude,
            lon:startAddress.longitude,
            address:startAddress.address,
            go_lat:endAddress.latitude,
            go_lon:endAddress.longitude,
            go_address:endAddress.address,
            start_time:start_time,
            is_dang,
            car_id,
        }).then( res => {
            if(res.code == 0){
                Taro.redirectTo({
                    url:`/pages/cashier/cashier?model=xia&order=${res.data.order}&money=${res.data.baoxian}`
                })
            }else if(res.code == 3){
                Taro.showModal({
                    title:"提示",
                    content:res.msg,
                }).then( res => {
                    if(res.confirm){
                        Taro.navigateTo({
                            url:"/pages/idauthUser/idauthUser"
                        })
                    }
                })
            }else if(res.code == 2){
                Taro.showModal({
                    title:"提示",
                    content:res.msg,
                }).then( res => {
                    if(res.confirm){
                        Taro.navigateTo({
                            url:"/pages/idauth/idauth?model=1"
                        })
                    }
                })
            }else{
                Taro.showModal({
                    title:"提示",
                    content:res.msg
                })
            }
        })
    }
    render(){
        let {startAddress ,endAddress , start_time , is_dang , car_id , phone , money , agreeXieyi , userRole } = this.state;
        let is_dang_txt = is_dang.length == 2 ? "自动挡,手动挡" : is_dang.length == 1 ? is_dang[0].name : "";
        return(
            <View className='create-order'>
                <View className='ot-item flex align-item-start space-between firstitem' >
                    <Image className='left' src={`${baseImgSrc}/address_fa.png`} />
                    <View className='right flex1'>{startAddress.address}</View>
                </View>
                <View className='ot-item flex align-item-start space-between'>
                    <Image className='left' src={`${baseImgSrc}/address_dao.png`} />
                    <View className='right flex1'>{endAddress.address}</View>
                </View>
                <View className='time flex align-items flex-start'>
                    <Image className='time-image' src={`${baseImgSrc}/index_time.png`} />
                    <Text className='time-txt flex1'>{start_time}</Text>
                </View>
                <View className='time flex align-items flex-start '>
                    <Image className='time-image' src={`${baseImgSrc}/call_phone.png`} />
                    {/* <Text className='time-txt flex1'>{phone}</Text> */}
                    <AtInput
                         className='time-txt flex1'
                        name='value2'
                        type='number'
                        placeholder='请输入电话'
                        value={phone}
                        border={false}
                        disabled
                        onChange={this.onChangePhone.bind(this)}
                    />
                </View>
                {
                    userRole == 1 ? (
                        <View className='time carid flex align-items space-between last-time'>
                            <View className='txt'>车牌号:</View>
                            <Input className='flex1 carids' type="text" value={car_id} placeholder='例京Axxxxx' onInput={this.onCarIdChange}  />
                        </View>
                        // <AtInput
                        // name='value'
                        // type='text'
                        // placeholder='标准五个字'
                        // value={car_id}
                        // onChange={this.onCarIdChange.bind(this)}
                        //     // className='carids'
                        //     // name='value'
                        //     // title='车牌号'
                        //     // type='text'
                        //     // placeholder='例京Axxxxx'
                        //     // value={car_id}
                        //     // onChange={this.onCarIdChange.bind(this)}
                        // />
                    ) : ""
                }
                <View className='beizhu flex align-items flex-start'>备注：{is_dang_txt}</View>
                <View className='baoxian-card flex align-content-around flex-wrap'>
                    <View className='bc-money fn-ctr'>
                        <Text className='bc-txt1'>保险费</Text>
                        <Text className='bc-txt2'>{money}元</Text>
                    </View>
                    <View className='shengming fn-ctr' onClick={this.changeAgree.bind(this)}>
                        {
                            agreeXieyi ?  <Text className='iconfont iconxuanzhong'></Text> : <Text className='iconfont iconkongxinyuan'></Text>
                        }
                        <View className='sm-txt flex align-items flex-start'>
                            <Text className='txta'>同意</Text>
                            <Text className='txtb' onClick={this.toBoaze.bind(this)}>《保险声明》</Text>
                        </View>
                    </View>
                </View>
                <AtButton className='next-btn' type='primary' size='normal' onClick={this.createOrder.bind(this)}>确定</AtButton>
                <AtMessage />
            </View>
        )
    }
}